<template>
    <section class="chart">
      <el-row>
        <el-col :span="16">
            <el-button-group>
                <el-button type="primary" v-for="day in days" @click="getStatistical(day.value)">{{day.label}}</el-button>
            </el-button-group>
        </el-col>
        <el-col :span="6">
            <el-button-group>
                 <el-button type="primary"  @click="downloadExl()">导出</el-button>
                 <a href="" :download="downloadName" id="hf"></a>
                 <el-button type="primary" @click="statisticalData">统计今日数据</el-button>
            </el-button-group>
        </el-col>
        <el-col :span="24">
            <el-table 
                :data="paperData"
                border
                tooltip-effect="dark"
                style="width: 100%;margin-top:20px;">
                <el-table-column
                    label="答题人数"
                    align="center"
                    width="100">
                        <template scope="scope">{{scope.row.tcount}}</template>
                </el-table-column>
                <el-table-column
                    label="试卷类型"
                    align="center"
                    width="120">
                        <template scope="scope">{{formatterTypeByType(scope.row.type)}}</template>
                </el-table-column>
                <el-table-column 
                    label="平均得分"  
                    align="center">
                    <el-table-column v-for="question in questionData"
                        :label="question"
                        align="center"
                        :width="20 * question.length + 40">
                        <template scope="scope">{{ scope.row[question]}} </template>
                    </el-table-column>
                    <el-table-column 
                        label="平均分"
                        align="center"
                        >
                        <template scope="scope">{{scope.row['平均分']}}</template>
                    </el-table-column>
                </el-table-column>
            </el-table>
       </el-col>
       <el-col :span="15">
            <el-checkbox-group 
                v-model="selectQuestion"
                :min="1"
                :max="5">
                <el-checkbox v-for="question in questionData" :label="question" :key="question">{{question}}</el-checkbox>
            </el-checkbox-group>
        </el-col>
        <el-col :span="5">
             <el-button type="primary" @click="_setEchartsOption">选择问题类型并重新生成报表</el-button>
        </el-col>
        <el-col :span="12" style="margin-top:20px;">
            <div id="answerDetailColumn" style="width:100%; height:400px;"></div>
        </el-col>
      </el-row>
      <div>详细信息</div>
      <div v-for="scoreData in scoreDatas">
      <div class="divline"></div>
          <p> 试卷类型 : {{formatterTypeByType(scoreData.type)}}</p>
          <p> 统计时间 : {{formatterTime(scoreData.time)}}</p>
          <p> 答题人数 : {{scoreData.tcount}} 人</p>
          <div v-for="question in scoreData.questions"> 
              <p>题干 : {{question.main}}</p>
<!--              <p>答案 : </p>
              <div v-for="(answer,index) in question.answers">
                  <p>选项 {{index + 1}} :{{answer.value}} {{answer.main}} 分值 : {{answer.score}} 选择人数 : {{answer.count}} 占比 : {{Math.round(answer.count / scoreData.tcount * 10000) / 100.00}} %</p>
              </div>
         -->

           <template>
                <el-table 
                    ref="multipleTable"
                    :data="countData"
                    border
                    tooltip-effect="dark"
                    style="width: 100%;margin-top:20px;"
                    @selection-change="handleSelectionChange">
                    <el-table-column
                        label="选项(占比)"
                        align="center"
                        width="120">
                         <template scope="scope">数据</template>
                    </el-table-column>
                    <el-table-column v-for="(answer,index) in question.answers"
                        :label="answer.value + '('+ answer.score +'分)/人'"
                        align="center"
                        width="155">
                        <template scope="scope">{{ answer.count }} ( {{Math.round(answer.count / scoreData.tcount * 10000) / 100.00}}  %)</template>
                    </el-table-column>
                     <el-table-column 
                        label="总人数"
                        align="center"
                        width="155">
                        <template scope="scope">{{scoreData.tcount}}</template>
                    </el-table-column>
                    <el-table-column 
                        label="平均分"
                        align="center"
                        width="155">
                        <template scope="scope">{{question.average}}</template>
                    </el-table-column>
                </el-table>
            </template>
          </div>

      </div>
    </section>
</template>

<script>
    import ScoreJs from './Score.js';
    module.exports=ScoreJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
</style>
